<template>
  <div class="homeContainer">
    <home-top :myTime="time" :user="user" :onlineCount="onlineCount" :msgCount="msgCount"></home-top>
    <extension></extension>
    <div class="qr" v-show="qrshow" @click="qrshow=false">
      <p>此二维码只用于添加亲友</p>
      <div class="myQr"></div>
      <!-- <img :src="user" alt=""> -->
    </div>
    <img @click="qrshow=!qrshow" src="../img/qrqr.jpg" style="width:.5rem;position:absolute;right:22%;top:3rem;">
  </div>
</template>
<script>
import homeTop from '@/components/home/homeTop'
import extension from '@/components/extension'
import {getDate} from '@/common/js/base/time.js'
export default {
  components:{
    homeTop,
    extension
  },
  data(){
    return {
      time:null,
      user:localStorage.myphoto ,
      onlineCount:'0',
      msgCount:'0',
      // mydatabase:null,
      qrshow:false,//二维码显示隐藏
    }
  },
  methods:{
      myTime(){//获取系统时间
        let timeNow=getDate(Date.now())
        this.time=timeNow.year+"年"+timeNow.mounth+"月"+timeNow.day+"日 "+timeNow.hours+":"+timeNow.minutes
      },
     qrcode(){
        //    new QRCode(document.getElementById('qrcode'), 'your content');
        // 设置参数方式
        let qr=document.querySelector(".homeContainer .myQr");
        // console.log(qr)
        var qrcode = new QRCode(qr, {
                text: localStorage.myphone,
                width:300,
                height:300,
                // colorDark : '#ffffff',
                // colorLight : '#000000',
                colorDark : '#000000',
                colorLight : '#ffffff',
                correctLevel : QRCode.CorrectLevel.M
        });
        // // 使用 API
        // qrcode.clear();
        // qrcode.makeCode('new content');
      },
  },
  mounted(){
      this.timer=setInterval(()=>{
          this.myTime()
      })
        this.$nextTick(function (){
            // require ("@/common/js/base/qrcode.min.js")
            this.qrcode()
      })
      // localStorage.setItem("chat_"+localStorage.userid,'')
      // 获取个人信息
    //  console.log(loca.getDisance(30.562597,104.200747,30.562115,104.200392))
    //  console.log(this.mylocation)
  },
  deactivated(){
      clearInterval(this.timer)
      this.timer=null;
  }
}
</script>
<style lang="less" scoped>
  @import "~less/base";
  .homeContainer{
    padding-top: 1px;
    position:absolute;
    top:.95rem;
    bottom:.94rem;
    width: 100%;
    background: @home-bg;
    overflow: scroll;
    .qr{//二维码相关
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: @model-color;
      z-index: 100;
      p{
        color: @color-t;
        font-size: 16px;
        position: absolute;
        top: 20%;
        width: 100%;
        text-align: center;
      }
      img{
        width: 1.5rem;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -.75rem;
        margin-left: -.75rem;
      }
      .myQr{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -150px;
      }
    }
  }
</style>
